<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta charset="UTF-8">
		<title>开始</title>
		<link rel="stylesheet" href="${BASE_PATH}/static/app/css/reset.css" />
	    <link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/app/css/header.css"/>		
		<link rel="stylesheet" href="${BASE_PATH}/static/app/css/info.css" />		
		<link rel="stylesheet" href="${BASE_PATH}/static/app/css/LArea.css">
	</head>

	<body>
		<div class="header">
			<a href="JavaScript:"><span class="back prev"></span></a>
			<a href="/index"><span class="logo_pic"></span></a>
			<span class="logo_text">OK 妈咪</span>
		</div>	
		<div id="names" class="content">
			<div class="top">
				<h3 class="title">会员注册</h3>
				<div class="main-content"><span>姓名</span><input type="text" name="name" id="name" class="nick-name" value="" placeholder="请输入您的真实姓名" /></div>
				<div class="main-content"><span>生日</span><input id="demo1" type="text" placeholder="选择你的生日" class="demo1" value="" readonly>
				</div>
				<div class="main-content"><span>地址</span><input id="city1" type="text" readonly placeholder="选择您的地址" class="demo1">
				</div>

				<div class="main-content main-select ">
					<span>性别</span>
					<input id="women" class="gender-content" type="text" readonly class="demo1" value="女" val="2">
					<span class="gender-btn"></span>
					
				</div>
				<div class="gender women">
					    <p value="2">女</p>
						<p value="1">男</p>
				</div>
			</div>
			<div class="bot">
				<div class="next"><span>下一步</span></div>				
			</div>
		</div>

		<div id="family" class="content hide">
			<div class="top">
				<h3 class="title">妈咪信息</h3>
				<div class="main-content main-select"><span>状态</span>
					<input type="text" name="radio1" id="radio1" placeholder="请选择你的状态"/>
					<span class="gender-btn"></span>
				</div>
				<div class="gender radio1">
						<p value="1">备孕</p>
						<p value="2">孕中</p>
						<p value="3">已生产</p>
				</div>
				<div class="main-content main-select"><span>胎次</span>
					<input type="text" name="radio2" id="radio2" placeholder="请选择你的状态"/>										
					<span class="gender-btn"></span>
				</div>
				<div class="gender radio2">
						<p value="1">头 胎</p>
						<p value="2">二 胎</p>
						<p value="3">多 胎</p>
				</div>
				<div class="main-content hide" id="preproduction"><span>预产期</span>
					<input id="demo2" type="text"  class="demo1" readonly  placeholder="请选择你的预产日期">
				</div>
				<div class="main-content hide" id="baby"><span>宝宝生日</span>
					<input id="demo3" type="text"  class="demo1" readonly  placeholder="选择宝宝生日">
				</div>
				<!-- <p class="tip">感谢你认真填写完个人信息，去看看我们为你准备的辣妈攻略吧！</p> -->
			</div>
			<div class="bot">
				<div class="complete" onclick="comelete();"><span>完成</span></div>
			</div>
		</div>

	</body>
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/datePicker.js"></script>

		<script type="text/javascript" src="${BASE_PATH}/static/lib/layer/layer.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/kit.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/LArea.js"></script>
		<script type="text/javascript" src="${BASE_PATH}/static/app/js/LAreaData1.js"></script>
	<script>
	/*
	 *获取id
	*/
	function $id(id){
		return document.getElementById(id);
	}	
	
	function comelete(){
		var name=$("#name").val();
		var type=$id("women").getAttribute("val");
	    var mami=$("#demo1").val();
		var state = $id("radio1").getAttribute("val"); 
		var yuchan=$("#demo2").val();
		var baby=$("#demo3").val(); 
		var times =$id("radio2").getAttribute("val"); 
		var city=$("#city1").val();
		if(!state){
			 Kit.ui.alert("请输入你的状态");
			 return;
		}
		if(!times){
			 Kit.ui.alert("请输入你的胎次");
			 return;
		}
		if(state==2){
			if(!yuchan){
				 Kit.ui.alert("请输入你的预产期");
				 return;
			}
		}
		if(state==3){
			if(!baby){
				 Kit.ui.alert("请输入宝宝生日");
				 return;
			}
		}

		var phone="${phone}";
		var sid="${sid}";
		var params={name:name,sid:sid,type:type,mami:mami,state:state,yuchan:yuchan,baby:baby,times:times,city:city,phone:phone}
		Kit.ajax.post("${BASE_PATH}/my/saveInfo",params,function(result){
			if(result.flag==0){
				Kit.render.redirect("${BASE_PATH}/index");
			}else if(result.flag==1){
				Kit.ui.alert("管家婆中已有此数据，无法重复注册");
				Kit.render.redirect("${BASE_PATH}/index");
			}else if(result.flag==2){
				Kit.ui.alert("此账号已注册，无法重复注册");
				Kit.render.redirect("${BASE_PATH}/index");
			}else{
				Kit.ui.alert("保存失败，请按要求填写资料");
				Kit.render.redirect("${BASE_PATH}/index");	
			}
		});
	}
	/*时间选择*/
		var calendar = new datePicker();
		calendar.init({
		'trigger':'#demo1', /*按钮选择器，用于触发弹出插件*/
		'type':'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
		'minDate':'1950-1-1',/*最小日期*/
		'maxDate':'2050-12-31',/*最大日期*/
		'onSubmit':function(){/*确认时触发事件*/
			var theSelectData=calendar.value;			
		},
		'onClose':function(){/*取消时触发事件*/
		}
	});
	var calendar2 = new datePicker();
		calendar2.init({
		'trigger':'#demo2', /*按钮选择器，用于触发弹出插件*/
		'type':'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
		'minDate':'${date }',/*最小日期*/
		'maxDate':'${h_date }',/*最大日期*/
		'onSubmit':function(){/*确认时触发事件*/
			var theSelectData=calendar.value;			
		},
		'onClose':function(){/*取消时触发事件*/
		}
	});
		var calendar3 = new datePicker();
 		calendar3.init({
			'trigger':'#demo3', /*按钮选择器，用于触发弹出插件*/
			'type':'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
			'minDate':'1950-1-1',/*最小日期*/
			'maxDate':'${date }',/*最大日期*/
			'onSubmit':function(){/*确认时触发事件*/
				var theSelectData=calendar.value;				
			},
			'onClose':function(){/*取消时触发事件*/
			}
		});	
		 var area1 = new LArea();
		area1.init({
			'trigger': '#city1', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
			'valueTo': '#value1', //选择完毕后id属性输出到该位置
			'keys': {
				id: 'id',
				name: 'name'
			}, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
			'type': 1, //数据源类型
			'data': LAreaData //数据源
			 
		}); 
	
	
		var selects=document.querySelectorAll(".main-select");
		var gender=document.querySelectorAll(".gender");
		var index=0;
		/*
		 * 点击显示与隐藏下拉框
		 */		
		for(var i=0;i<selects.length;i++){
			selects[i].setAttribute("index",i);
			selects[i].onclick=function(){				
				index=this.getAttribute("index");
				if(gender[index].style.display=="block"){				
					hides(gender);
					gender[index].style.display="none";
				}else{
					hides(gender);
					gender[index].style.display="block";
				}

			}
		}
		
		/*
		 *选择性别
		 * */
		var women=document.querySelector("#women");
		var womenLen=document.querySelectorAll(".women p");
		for(var j=0;j<womenLen.length;j++){
			womenLen[j].onclick=function(){
				women.value=this.innerHTML;
				women.setAttribute("val",this.getAttribute("value"));
				gender[0].style.display="none";
			}
		}
		
		/*
		 *选择状态
		 * */
		var radio1=document.querySelector("#radio1");
		var radio1Len=document.querySelectorAll(".radio1 p");
		//1.都不显示 2.孕中显示预产期  3.已生产显示宝宝生日  
		var preproduction=$id("preproduction");
		var baby=$id("baby"); 
		for(var k=0;k<radio1Len.length;k++){
			radio1Len[k].onclick=function(){
				radio1.value=this.innerHTML;
				radio1.setAttribute("val",this.getAttribute("value"));
				gender[1].style.display="none";
				 if(this.getAttribute("value")=="2"){
					baby.className="main-content hide";
					preproduction.className="main-content";	
				}else if(this.getAttribute("value")=="3"){
					baby.className="main-content";
					preproduction.className="main-content hide";					
				}else{
					baby.className="main-content hide";
					preproduction.className="main-content hide";
				} 
			}
		}
		
		/*
		 *选择胎次
		 * */
		var radio2=document.querySelector("#radio2");
		var radio2Len=document.querySelectorAll(".radio2 p");
		for(var r=0;r<radio1Len.length;r++){
			radio2Len[r].onclick=function(){
				radio2.value=this.innerHTML;
				radio2.setAttribute("val",this.getAttribute("value"));
				gender[2].style.display="none";				
			}
		}
		
		
		/**
		 * 上一页
		 */
		var names=document.querySelector("#names");		
		var family=document.querySelector("#family");
		var prev=document.querySelector(".prev");//上一步
		var next=document.querySelector(".next");//下一步
			next.onclick=function(){
				var name=$("#name").val();
				var type=$id("women").getAttribute("val");
			    var mami=$("#demo1").val();

				var city=$("#city1").val();

				if(!name){
					 Kit.ui.alert("请输入你的真实姓名");
					 return;
				}
				if(!mami){
					 Kit.ui.alert("请输入你的生日");
					 return;
				}
				if(!type){
					 Kit.ui.alert("请输入你的性别");
					 return;
				}
				if(!city){
					 Kit.ui.alert("请输入你的地址");
					 return;
				} 
					showHide(family,names);
			}
			prev.onclick=function(){				
				showHide(names,family);
			}
		/**
		 * 显示与隐藏
		 * @param {Object} a
		 * @param {Object} b
		 */
		function showHide(a,b){
			a.style.display="block";
			b.style.display="none";
		}
		/*
		 * 循环隐藏元素
		 */		
		function hides(obj) {
			for(var i = 0; i < obj.length; i++) {
				obj[i].style.display="none";
			}
		}

	</script>
</html>
